import { FC, ReactNode, useEffect, useRef, useState } from 'react'
import './VListChildren.less'
type TVListChildren = {
  children: ReactNode
  outHeight: number
  offset: number
  scrollTop: number
}
const VListChildren: FC<TVListChildren> = ({ children, outHeight, scrollTop, offset }) => {
  const [showChildren, setShowChildren] = useState(true)
  const VListChildrenDom = useRef<HTMLDivElement | null>(null)
  let domHeight = useRef<number>(0)
  useEffect(() => {
    const top = VListChildrenDom.current?.style.top!
    const { height } = VListChildrenDom.current!.getBoundingClientRect()
    !domHeight.current && (domHeight.current = height)
    setShowChildren(outHeight + offset + scrollTop >= parseInt(top) && scrollTop <= parseInt(top) + offset + domHeight.current)
  }, [scrollTop])
  return (
    <div ref={VListChildrenDom} className="VListChildren">
      {showChildren && children}
    </div>
  )
}
export default VListChildren
